Memperbaiki

Solusi Tepat untuk Setiap Masalah

iklan banner
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan

Minggu, 12 April 2020

Inilah 6 Cara Menghasilkan Uang dari Youtube | Memperbaiki

      Comment  
Mungkin diantara kalian ada yang belum paham bagaimana sih caranya menghasilkan uang dari Youtube?. Saat ini Youtube sudah menjadi salah satu sumber penghasilan bagi para Youtuber, ada yang penghasilannya ratusan ribu perbulan bahkan sampai milyaran perbulan. Are you serious? of course.

6 Cara menghasilkan Uang dari Youtube
6 Cara Menghasilkan Uang dari Youtube


Jika anda ingin mendapatkan uang dari Youtube maka anda harus mengupload konten video yang unik dan menarik ke Youtube. Peluang anda mendapatkan penghasilan akan semakin besar seiring banyaknya viewer. Saat ini banyak sekali orang yang menghasilkan uang dari video-video yang mereka upload ke Youtube, bahkan ada orang yang menghasilkan uang puluhan juta hingga ratusan juta rupiah per bulan. Anda juga mau kan? Lantas, dari manakah uang tersebut?

Berikut gambarannya, berbagai jenis video bisa anda temukan di Youtube, mulai dari video tutorial, video musik, video berita, video lucu, video teknologi, video cuplikan film, dan masih banyak lagi video lainnya. Saat anda mengunjungi salah satu Video di Youtube seringkali anda menjumpai iklan di sana, baik itu di bagian videonya ataupun di bagian sidebar. Iklan tersebut biasanya tampil pada video-video yang jumlah viewsnya cukup banyak. Penghasilan pemilik video berasal klik iklan atau jumlah views iklan yang muncul di video tersebut.

Berikut ini yang perlu anda lakukan agar bisa menjadi mitra Youtube dan menghasilkan uang dari layanan mereka. Berikut ini langkah-langkahnya :

1. Membuat Akun YouTube

Silahkan daftar email dari google (gmail). Jika anda sudah memiliki anda bisa login ke akun Google anda (gmail), setelah itu buka situs www.youtube.com. Langkah berikutnya adalah membuat Channel untuk akun YouTube Anda. Klik link “My Channel” yang ada di sebelah kiri. Nanti akan muncul pilihan, apakah kita akan menggunakan nama asli (nama sewaktu mendaftar email) atau menggunakan nama lain sebagai nama Channel di Youtube. Anda bisa gunakan nama lain sebagai nama Channel YouTube, misalnya nama domain website Anda atau nama khusus. Klik link “To use a business or other name, click here”, nanti anda akan diarahkan ke halaman baru.

2. Upload Video Secara Rutin

Rajinlah mengupload video, anda perlu terus update video. Youtube sendiri menginginkan kerjasama jangka panjang dengan para mitranya dan Youtube sangat menghargai mereka yang secara teratur mengupload video baru.

3. Pastikan Video Anda Tidak Melanggar Hak Cipta


Untuk bisa menghasilkan uang dari Youtube, konten video anda haruslah original. Konten video ini harus milik Anda sendiri atau video yang materinya tidak melanggar hak cipta orang lain, mulai dari materi videonya (video clip, image, logo) sampai backsound. Semakin banyak video yang di-upload ke Channel Anda, maka akan semakin besar peluang untuk mendapatkan penghasilan dari Youtube. Ingat, jangan pernah mengunggah materi video yang melanggar hak cipta orang lain ke dalam Channel Youtube anda karena hal tersebut bisa membuat akun anda bermasalah di kemudian hari. Tentu anda tidak ingin kalau akun anda dibanned bukan?

4. Tingkatkan Popularitas Channel YouTube Anda

Ada banyak cara yang bisa dilakukan untuk meningkatkan popularitas Channel YouTube. Diantaranya adalah:

- Seringlah mengupload video yang bermanfaat, unik, menarik dan berkualitas baik. Sebaiknya video yang anda upload memiliki resolusi yang baik dan tampilannya jelas tidak pecah-pecah.

- Fokus upload konten video yang sesuai dengan niche atau minat anda. Misalnya konsisten membuat video parodi. Jika anda konsisten maka subscriber anda akan bertambah banyak. Dengan begitu channel anda akan mudah dikenali oleh para pengguna YouTube.

5. Perbanyak dan Kembangkan Audiens Video Anda

Perbanyaklah viewer dan subscriber Channel anda. Ajak viewer anda untuk menjadi subscriber Channel YouTube anda. Promosikan video atau Channel YouTube Anda ke media sosial, seperti facebook, twitter,dll. Jika konten video anda benar-benar bagus, maka viewer dan subscriber tidak sungkan-sungkan men-share video anda diakun media sosial mereka.

6. Mendaftar Ke Google Adsense

Inilah bagian yang paling penting yaitu Google Adsense. Biasanya Channel yang memiliki video dengan banyak views akan mendapatkan undangan langsung dari Google Adsense. Tapi bila kita belum mendapatkan undangan tersebut, kita bisa mendaftarkan diri ke Google Adsense. Bila sebelumnya Anda sudah memiliki akun Google Adsense, maka Anda tidak perlu mendaftar lagi. Hubungkan akun Google Adsense anda ke akun Youtube anda, tentunya email yang digunakan harus sama. Setelah akun Adsense terhubung dengan akun Youtube, maka anda tinggal menunggu penghasilan yang masuk dari video-video anda.

Demikian 6 Cara Menghasilkan Uang dari Youtube, semoga kalian yang punya cita-cita menjadi Youtuber dapat lebih bersemangat untuk menggapainya. Salam sukses!

Selasa, 18 Februari 2020

Inilah Cara Menghilangkan Nomor Urut Popular Post Viomagz | Memperbaiki

      Comment  
Pada postingan sebelumnya kita telah membahas mengenai Cara Menghapus Label Di atas Postingan Homepage Template VioMagz. Kali ini saya akan menulis tentang cara menghilangkan nomor urut viomagz. Meskipun mungkin cara seperti ini sudah banyak dibahas oleh teman -teman yang lain, tapi tidak ada salahnya juga saya share ulang untuk kalian yang belum tahu cara menghilangkan nomor urut viomagz. 

Tampilan nomor pada popular post VioMagz
cara menghilangkan nomor urut popular post viomagz

Edit Tema HTML 

Dibawah ini adalah langkah langkah untuk menghilangkannya, langkah pertama kalian buka Blogger > Pilih Tema > Edit HTML > Lalu kalian cari code seperti dibawah ini lalu hapus

.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before {
 content: counter(num) !important;
 font-size: 30px;
 font-weight: 500;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 background: linear-gradient($(link.color), #fff);
 color: #fff !important;
 width: 30px;
 padding-top: 10px;
 text-align: center;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
 margin-left: 34px;
}

Save Tema HTML

Kemudian save kembali template yang sudah kalian edit tadi, lalu kalian bisa lihat langsung lihat di blognya.

 Demikian pembasan kita kali ini tentang cara menghilangkan nomor urut viomagz selamat mencoba dan semoga berhasil.

Inilah Cara Membuat Social Icon Simple Keren di Blog | Memperbaiki

      2 comments  
Sebelumnya kita telah membahas mengenai Cara membuat Sitemap Pada Halaman Statis Blog dan untuk postingan saya kali ini akan membagikan Cara membuat Social icon. Untuk kalian yang belum tahu cara membuatnya dapat mengikuti tutorial dibawah ini:

Membuat Social Icon Simple Keren di Blog


Dalam Cara membuat social icon, sobat bisa menggunakan code Font Awesome dibawah ini, silahkan copy code dibawah ini. dan terapkan sebelum </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Jika sudah di terapkan, selanjutnya kalian ambil code CSS dibawah ini dan terapkan sebelum </style> atau </b:skin>.

/* SOCIAL ICON */
ul.nav-social {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-social li {
display: inline-block;
padding: 0px 15px;
margin: 0;
}
ul.nav-social li a {
color: #999999;
}
ul.nav-social li a:hover {
color:#555;
}
ul.nav-social li a.fcb:hover {
color:#3B5A9B;
}
ul.nav-social li a.gpl:hover {
color:#DD4B39;
}
ul.nav-social li a.twt:hover {
color:#1BB2E9;
}
ul.nav-social li a.ytb:hover {
color:#ED3F41;
}
ul.nav-social li a.lkdn:hover {
color:#007fb2;
}
ul.nav-social li a.igicon:hover {
color:#527fa4;
}
Simpan kembali template yang sudah diedit tadi,  jika css diatas sudah kalian terapkan.
Kemudian untuk menampilkan icon social media kalian bisa menggunakan kode dibawah ini.

<!-- social media button start -->
<ul class='nav-social'>
  <li><a class='fcb' href='https://www.facebook.com/official.agusgunawan' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></i></a>
  </li> 
  <li><a class='igicon' href='https://www.instagram.com/agusbegang' rel='nofollow'><i class='fa fa-instagram fa-2x'/></i></a>
  </li>
  <li><a class='gpl' href='https://plus.google.com/118016537449996287824' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></i></a>
  </li>
  <li><a class='twt' href='https://twitter.com/agus55666' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></i></a>
  </li>
          <li><a class='ytb' href='https://www.youtube.com/channel/UCEFZtLXXuLTM3oa96pzIw5g' rel='nofollow'><i class='fa fa-youtube fa-2x'/></i></a>
  </li>
</ul>
<!-- social media button end -->
Kalian dapat menyesuaikan kode diatas, dengan mengedit terlebih dahulu link yang ada pada code diatas, dengan link kalian masing-masing.

Demikian pembahasan mengenai Cara membuat social icon, semoga bermanfaat, selamat mencoba dan semoga berhasil.

Inilah Cara Membuat Sitemap Pada Halaman Statis Blog | Memperbaiki

      1 comment  
Kita berjumpa lagi didunia maya, kali ini saya akan memberikan trik tentang bagaimana Cara membuat Sitemap Pada Halaman Statis Blog. Barangkali cara ini sudah banyak yang mempostingnya, tetapi tidak ada salahnya juga saya memposting ulang untuk teman-teman blogger setia pengunjung blog saya yang belum mengetahui cara membuatnya.

cara membuat sitemap blog

Tampilan sitemap yang akan kita buat tidak akan jauh berbeda dengan gambar diatas. Mari kita langsung saja membahasnya. Berikut ini adalah kode scriptnya:

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Cara membuatnya adalah buka blogger > pilih Halaman > Buat Halaman baru > Pilih Dari tadinya Compose ganti Menjadi HTML > Lalu pastekan codenya, dan jangan lupa kalian beri judul halaman dengan sitemap, setelah itu kalian tinggal publikasikan.

Demikian teman - teman, sekarang sudah bisakan kalian membuatnya? saya cukupkan sekian dulu tentang Cara membuat Sitemap Pada Halaman Statis Blog, mohon maaf jika ada salah-salah kata atau pengetikan. Selamat mencoba dan semoga berhasil.

Inilah Cara Memasang Google Translate di Blog | Memperbaiki

      1 comment  
Hallo kawan, pada kesempatan sebelumnya saya sudah pernah membagikan mengenai "Cara memasang Slide Demo Dan Download," untuk postingan saya selanjutnya akan membagikan trik kepada kalian mengenai cara Cara memasang GOOGLE TRANSLATE di blog. Mungkin cara yang akan saya share ini sudah banyak dibahas oelh blogger yang lain, tapi mungkin tidak ada salahnya jika saya coba ulas kembali.

Cara memasang GOOGLE TRANSLATE di blog


Apabila kalian ingin memiliki tampilan "Google Translate," yang berbeda dengan tampilan bawaannya mungkin widget dibawah ini bisa menjadi solusinya untuk sobat. Baiklahl, angsung saja kita kepokok pembahasannya.
Caranya adalah sebagui berikut, silahkan ikuti dengan seksama:
Cara memasang GOOGLE TRANSLATE di blog
<style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px; 
  border:none; 
  background-color:#fff;
  color:#444;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border:1px solid #e0e0e0;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#4791d2;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%;
  transition:all 0.3s ease; 
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>

Cara untuk memasangnya diblog kalia adalah dengan kalian buka halaman / login ke blog masing-masing setelah itu kalian cari menu Tata Letak > Add widget > HTML/JAVASCRIPT > PASTEKAN CODE DIATAS DI COLOM KOSONG YANG SUDAH DISEDIAKAN > SAVE/SIMPAN 

 Demikianlah  tentang bagaimana cara memasang GOOGLE TRANSLATE di blog, Semoga bermanfaat, selamat mencoba dan semoga berhasil.

Inilah Cara Memasang Slide Demo Dan Download | Memperbaiki

      Comment  
Berjumpa kembali bersama saya, kali ini saya akan mencoba membagikan kepada teman teman pengunjung blog saya tentang Cara memasang Slide Demo Dan Download, barangkali cara seperti ini sudah tidak asing lagi untuk sebagian pengguna blogspot. Tetapi tidak ada salahnya saya share kembali untuk teman yang belum tahu cara dalam pembuatannya.
Baiklah, mari kita langsung saja ke pembahsan kita kali ini. Caranya adalah kalian pasang terlebih dahulu code "Font Awesome" dibawah ini.

Cara Memasang Slide Demo Dan Download


<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Cara memasang kode diatas bagaimana dan cara meletakannya dimana? Letakan codenya tepat sebelum </head> . Setelah code diatas terpasang kita langsung saja ke bagian CSS, kalian bisa gunakan CSS dibawah ini.

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}


Taruhlah code "CSS" tepat sebelum </style> atau kalian bisa meletakkannya sebelum </b:skin>. setelah itu kalian save kembali template yang sudah di edit tadi. Untuk menggunakan di postingan blog kalian bisa menggunakan "CODE HTML" dibawah ini.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Demikian cara dalam memasang slide demo dan download, selamat mencoba dan semoga bisa menambah wawasan teman teman.

Inilah Cara membuat Simple Pre dengan Seleksi | Memperbaiki

      Comment  
Hallo guys, ketemu lagi dengan saya, kali ini saya akan membagikan kepada kalian semua yang belum pernah menerapkan Simple Pre Code Dengan Seleksi di Postingan Blog mungkin cara seperti ini telah banyak yang membahasnya namun tidak ada salahnya juga saya share kembali untuk kalian yang belum tahu caranya.

Apabila teman teman menggunakan, atau menerapkan "Simple Pre Code" seperti ini, akan memudahkan pengunjung yang akan mengcopy HTML, CSS, dan lain sebagainya yang kalian share di postingan. Baik langsung saja kita ke pokok pembahasan dari postingan ini.


Apabil kalian tertarik dengan kode ini, silahkan kalian salin terlebih dahulu code CSS dibawah ini. Kemudian taruh kodenya tepat sebelum </style> atau juga kalian bisa taruh sebelum </b:skin>
Cara membuat Simple Pre dengan Seleksi

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}

Jika code css diatas sudah terpasang, selanjutnya kalian copy code Javascript dibawah ini. Dan terapkan codenya tepat sebelum </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Kemudian kalian simpan kembali template yang sudah kalian edit tadi. Untuk menerapkannya di postingan kalian bisa menggunakan code html dibawah ini.

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>


Baiklah teman - teman, mungkin cukup sekian dulu pembahsan kita tentang Cara membuat Simple Pre dengan Seleksi, selamat mencoba dan semoga berhasil.

Senin, 17 Februari 2020

Inilah Cara Menghapus Label Di atas Postingan Homepage Template VioMagz | Memperbaiki

      1 comment  
Baiklah kawan, pada postingan kali ini saya akan membagikan Cara Menghapus Label Di atas Postingan Homepage Template VioMagz, kenapa saya membagikan cara seperti ini? karena masih banyak yang belum mengetahui tentang cara menghapusnya atau menghilangkannya meskipun cara seperti ini sudah di posting oleh pembuatnya. Sehingga tidak ada salahnya jika saya membahas mengenai hal tersebut.

Cara Menghapus Label Di atas Postingan Homepage Template VioMagz

Pada gambar diatas yang sudah saya tandai itu yang akan kita bahas di postingan saya kali ini. Mari kita langsung saja untuk mengulasnya.
Cara Menghapus Label Di atas Postingan Homepage Template VioMagz 
Silahkan kalian buka Blogger > pilih tema > edit html > setelah itu kalian cari code HTML seperti dibawah ini

<b:if cond='data:post.labels'>
   <div class='label-line'>
   <span class='label-info-th'>
   <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'></b:if>
   </b:loop>
   </span>
   </div>
   </b:if>


Jika code diatas sudah ketemu, selanjutnya kalian hapus saja,
lalu simpan kembali template yang sudah di edit tadi.
Untuk melihat hasilnya bisa langsung di coba saja di blog kalian, selamat kini label diatas postingan sudah menghilang.kemudian untuk mengembalikannya lagi kalian tinggal memasang kembali kode diatas.

Demikian pembasan kita kali ini tentang Cara Menghapus Label Di atas Postingan Homepage Template VioMagz, semoga bermanfaat dan salam sukses.

Inilah Cara Membuat Formulir Kontak Pada Halaman Statis | Memperbaiki

      Comment  
Hallo guys, setelah sebelumnya saya sudah membahas tentang Cara agar blog menjadi Fast Loading, Pada tulisan saya kali ini akan sedikit berbagi bagaimana cara Memasang Formulir Kontak Pada Halaman Statis. Kenapa saya membahas tentang ini? karena form kontak seperti ini mempunyai juga memiliki fungsi yang penting pada blog


Kemudian bagaimana cara membuatnya? dibawah ini telah saya siapkan trik Memasang Formulir Kontak Pada Halaman Statis, mari kita langsung saja ke pembahsan ini.
Teknik memasang widget ini pada halaman statis kalian cukup pasang terlebih dahulu Font Awesome 4.0.3 dibawah ini, dan letakan saja tepat sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Apabila kalian telah selesai, pasang juga css dibawah ini, dan bisa kalian letakan code cssnya tepat sebelum </style>

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

Apabila Sudah terpasang selanjutnya kalian simpan template yang sudah kalian edit. Langkah selanjutnya adalah kalian buka kembali halaman Blogger > Pilih Halaman > Halaman Baru > Compose ganti dengan HTML > 

Kemudian pilih menu seperti gambar dibawah ini


Bila pengaturannya sudah seperti gambar diatas, kalian tinggal klik selesai. Lalu kalian copy code dibawah ini

 <form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> 
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Silahkan pastekan script diatas, dan jangan lupa memberikan judul pada halamannya. Setelah itu kalian publish, selesai.

Semoga bermanfaat, selamat mencoba.

Inilah Cara Agar Loading Blog Menjadi Cepat | Memperbaiki

      Comment  
Memiliki blog dengan loading yang cepat memang sangat menjadi idaman banyak orang/blogger. Karena memiliki blog yang loadingnya cepat menjadi kebanggaan tersendiri bagi pemilik blog maupun pengunjung blog itu sendiri.

 Cara Agar Blog Fast Loading 
Sebelumnya kita juga pernah membahas Cara memasang Efek preloading di blog, yaitu memunculkan simbol ketika page sedang loading.
Berikut ini adalah cara sederhana yang dapat membantu blog kita menjadi lebih cepat loadingnya.


Bagi kalian yang tertarik untuk mempercepat loading blognya bisa menggunakan cara dibawah ini, silahkan perhatikan dengan baik.
Urutan yang haruus kalian lakukan adalah buka blogger > Pilih Tema > Edit HTML lalu kalian cari code </head> jika sudah ketemu silahkan kalian ganti code penutupnya dengan code dibawah ini

&lt;!--</head>--&gt;&lt;/head&gt;

 Jika sudah mengubahnya, selanjutnya kalian cari kode ini </body> kalian ganti penutup body dengan code dibawah ini

&lt;!--</body>--&gt;&lt;/body&gt;

 Apabila semuanya sudah selesai diterapkan langkah demi lagkah seperti diatas, kalian tinggal save kembali template yang sudah kalian edit tadi. untuk mengecek apakah speed dari blog kalian sudah mengalami perubahan atau belum bisa dicek di GTmetrix.

 Begitu, mudah bukan? cara diatas adalah cara yang paling sederhana dan mudah untuk mempercepat loading blog, semoga berguna.

Inilah Cara Agar Postingan Tidak Bisa Di Copy Paste | Memperbaiki

      1 comment  
Hallo teman, tentunya kalian akan merasa kesal jika artikel atau tulisan yang kita share atau publikasikan di blog ada yang menyalinnya. Apa yang teman teman rasakan udah cape-cape mikir dan nulis, ternyata ketika dipublikasikan malah ada yang copy tanpa meminta izin dahulu. kalau copy menyertai link sumbernya sih masih mending, tapi jika tidak....??

cara agar postingan tidak bisa di copy paste

Agar terhindar dari itu semua saya akan menshare Cara Agar Postingan Di blog tidak Bisa di copy paste. Bagi para blogger yang sudah lama berkecimpung tentunya sudah tidak asing lagi dengan teknik serupa ini. Akan tetapi masih banyak juga yang belum tahu caranya.

Cara Agar Postingan Tidak Bisa Di Copy Paste
Karena hal itu bagi yang belum tahu caranya bisa mengikuti cara - cara dibawah ini:

Silahkan kalian ambil kodenya dibawah ini.

.post-body ::selection {background:#eafdb7;color:#000;} body{display:block; -khtml-user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; unselectable:on;}

Untuk cara meletakan kodenya adalah cukup mudah, kalian buka blogger > Pilih Tema > Edit HTML > letakan tepat sebelum </style> atau ]]></b:skin> selanjutnya simpan. Silahkan kalian test apakah postingan kalian masih bisa di copy paste atau tidak.

Demikian tulisan mengenai Cara Agar Postingan Tidak Bisa Di Copy Paste selamat bereksperimen dan semoga berhasil.

Inilah Cara Menerapkan Widget Efek Rating Di Popular Posts Blogger | Memperbaiki

      Comment  
Setelah sebelumnya kita membahas tentang Cara Membuat Widget Jadwal Rilis Anime di Blog
kali ini postingan saya akan membagikan teknik Cara menerapkan Widget Efek Rating Di Popular Posts Blogger untuk sebagian blogger tentu sudah tidak asing lagi dengan widget ini, karena tentu sudah banyak juga yang membagikannya di luar sana.
Saya akan coba menulis lagi bagi teman teman yang belum tahu cara menerapkannya di blog ini.


Cara menerapkan Widget Efek Rating Di Popular Posts Blogger
Kegunaan dari widget ini selain mempercantik tampilan blog (Popular Posts) agar blog terlihat lebih keren. Baiklah langsung saja kita ke pokok dari pembahasan di postingan ini.

Untuk bisa membuatnya atau menampilkannya silahkan kalian ambil kode dibawah ini terlebih dahulu

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Untuk cara meletakan code diatas sobat bisa buka blogger > Pilih Tema > Edit Html > Selanjutnya letakan codenya tepat sebelum </head>

Apabila sudah selesai selanjutnya kalian gunakan Css dibawah ini untuk menampikan efek rating bintang di popular postsnya

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Kemudian kalian letakan kode cssnya tepat berada sebelum </style> atau bisa </b:skin> lalu simpan kembali template yang sudah kalian  edit, untuk melihat hasilnya kalian bisa lihat di blog masing-masing.

Demikian tulisan kali ini, mengenai Cara menerapkan Widget Efek Rating Di Popular Posts Blogger selamat mencoba dan semoga sukses.

Inilah Cara Membuat Widget Jadwal Rilis Anime di Blog | Memperbaiki

      Comment  
Hallo guys, sebelumnya skita sudah belajar bagaimana Cara membuat Menu Multi Dropdown Di blog, kemudian untuk postingan saya kali ini akan memebagikan bagaimana Cara membuat widget jadwal rilis anime di blogger. Bagi teman teman blogger yang sudah lama tentunya tidak asing lagi dengan widget seperti ini. Tetapi bagi sebagian kawan blogger dan khususnya bagi blogger pemula seperti saya ini mungkin masih sedikit bingung bagaimana cara membuatnya.



Baiklah teman teman, mari kita langsung kepokok judul dari postingan ini, tulisan mengenai Cara membuat widget jadwal rilis anime di blogger ini berguna bagi kalian yang baru saja membuat blog tentang anime dan mungkin widget seperti ini bisa kalian terapkan.

Apabila tertarik untuk menggunakannya bisa langsung di praktekan di blog dengan cara berikut ini: Silahkan kalian buka Blogger > PILIH TEMA > EDIT HTML > Letakan codenya tepat sebelum </style>

/* Jadwal Rilis Anime */
.gunawan-fix{width:25%;float:left}
.gunawan-wrap{padding:10px 4px 10px}
.gunawan-title{color:#fff;font-family:sans-serif;text-align:center;padding:20px 10px;text-transform:uppercase;font-size:22px;font-weight:bold}
.gunawan-fix:nth-child(1) .gunawan-title{background:#000;border-bottom:5px solid #007dd0}
.gunawan-fix:nth-child(2) .gunawan-title{background:#ff0000;border-bottom:5px solid #308e00}
.gunawan-fix:nth-child(3) .gunawan-title{background:#c1004f;border-bottom:5px solid #9e0041}
.gunawan-fix:nth-child(4) .gunawan-title{background:#ff5722;border-bottom:5px solid #ce4115}
.gunawan-fix:nth-child(5) .gunawan-title{background:#008287;border-bottom:5px solid #00696d}
.gunawan-fix:nth-child(6) .gunawan-title{background:#7200ac;border-bottom:5px solid #5d008c}
.gunawan-fix:nth-child(7) .gunawan-title{background:#f58500;border-bottom:5px solid #bd6700}
.gunawan-fix:nth-child(8) .gunawan-title{background:#8c0000;border-bottom:5px solid #610000}
.gunawan-wrap ul{margin:0!important;padding:0!important;color:#333;background:#ebebeb}
.gunawan-wrap ul li{list-style:none;padding:7px 12px!important;transition:all 0.3s;margin:0!important}
.gunawan-wrap ul li:hover{background:#ddd}
.gunawan-wrap ul li a{color:#333}
.gunawan-wrap ul li a:hover{color:#333}

Apabila CSS diatas sudah kalian pasang, langkah selanjutnya adalah kalian simpan kembali template yang sudah di edit tadi. Kemudian langkah selanjutnya untuk menampilkan widgetnya kalian bisa menggunakan code dibawah ini

<div class='gunawan'>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Senin</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Selasa</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Rabu</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Kamis</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Jumat</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Sabtu</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Minggu</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
   <div class='gunawan-fix'>
      <div class='gunawan-wrap'>
         <div class='gunawan-title'>Random</div>
         <ul>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
            <li><a href='#'>Nama Anime</a></li>
         </ul>
      </div>
   </div>
</div>


Kalian bisa mengedit dan menyesuaikan kode diatas menurut keinginan kalian.
Cukup sekian tuilisan dari saya kali ini, selamat mencoba dan semoga berhasil.

Inilah Cara Membuat Menu Multi Dropdown Di Blog atau Website | Memperbaiki

      Comment  
Hallo teman, pada artikel saya kali ini akan sedikit berbagi kepada kalian sobat blogger, Teknik membuat Menu Multi Dropdown Blog yang bisa jadi untuk sebagian pengguna blogger telah tidak asing lagi dengan teknik semacam ini, tetapi tidak ada salahnya juga apabila saya share kembali kepada kalian yang belum mengetahui teknik membuatnya.

Oke sobat apabila tertarik untuk memakainya, kalian dapat mencontoh langkah ataupun trik gampang dibawah ini, serta untuk yang telah mengetahui metode membuatnya dapat menyimak saja.


Cara membuat Menu Multi Dropdown
Yang pertama kali silahkan kalian buka blogger > Pilih Tema > Edit Html > lalu kalian letakan code css dibawah ini tepat sebelum </style> atau juga bisa sebelum </b:skin>

/* Menu Multi Dropdown AG */ ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#000;width:100%} ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#000} ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#000; padding:0 7px 0} ul#mainmenu li:hover>ul {visibility:visible;opacity:1;} ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;} ul#mainmenu li:hover {z-index:1;} ul#mainmenu ul ul {position:absolute;left:100%;top:0;} ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;} * html ul#mainmenu li a {display:inline-block;} ul#mainmenu>li {margin:0;} ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;} ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;} ul#mainmenu ul li {float:none;margin:7px 0 0;} ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #000;} ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;} ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;} ul#mainmenu ul span {background-image:none; padding-right:5px;} ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000;} ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#fff;} ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#000;color:#FFFFFF;}

Setelah itu kalian buat menunya seperti dibawah ini bisa kalian gunakan codenya dan sebelum menyimpan kembali template yang kalian edit silahkan kalian edit terlebih dahulu code htmlnya sesuai yang kalian inginkan.

<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
    <li class='menutop'><a href='#' title='Home'>Home</a>
    </li>
    <li class='menutop'><a href='#' title='Product Info'>Product info</a>
        <ul>
            <li><a href='#'>Features</a>
            </li>
            <li><a href='#' title='Installation'>Installation</a>
                <ul>
                    <li><a href='#'>Description of files</a>
                    </li>
                    <li><a href='#'>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Parameters info</a>
            </li>
            <li><a href='#' title='Supported browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class='menutop'><a href='#' title='Samples'>Samples</a>
        <ul>
            <li><a href='#'>Android template</a>
            </li>
            <li><a href='#'>Mac template</a>
            </li>
            <li><a href='#' title='Mercury template'>Mercury template</a>
                <ul>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Lilac theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Elegant template</a>
            </li>
            <li><a href='#' title='Poin Template'>Point template</a>
                <ul>
                    <li><a href='#'>Aquamarine theme</a>
                    </li>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Grey theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                    <li><a href='#'>Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#' title='Toolbars template'>Toolbars template</a>
            </li>
        </ul>
    </li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
</ul>
    </nav>
<!-- End menu multi dropdown -->

Apbila kalian sudah selesai tinggal disave atau simpan kembali template yang sudah kalian edit. kemudian teman teman bisa melihat langsung hasilnya di blog kalian, apabila ada yang kurang sesuai kalian bisa sesuaikan kodenya sendiri.

Mungkin demikian untuk tulisan kali ini, sekian dulu selamat mencoba dan semoga berhasil.

Inilah Cara memasang Efek preloading di blog | Memperbaiki

      Comment  
Hallo guys, tadinya aku telah coba memposting gimana Metode memasang Postingan Terpaut di Dalam Artikel Web, artikel aku berikutnya bakal sedikit memposting ataupun memberikan sedikit Teknik memasang Efek preloading di web nah untuk trik semacam ini juga bisa jadi sebagian telah pada mengetahuinya. Tetapi aku akan membagikan kepada sobat yang belum mengetahui triknya.

cara memasang efek preloading pada blog

Buat mempersingkat waktu kita langsung saja ke pokok ulasan dalam artikel ini.

Cara memasang Efek preloading di blog 

Untuk teman teman yang tertarik menggunakannya silahkan bisa mengikuti langkah-langkah berikut ini. Pertama kalian pasang dulu code dibawah ini dan letakan sebelum </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Langkah selanjutnya sobat silahkan letakan code dibawah ini tepat sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
Selanjutnya sobat letakan code CSS dibawah ini tepat sebelum </style> atau bisa juga </b:skin> ya.

/* Preloader */
#preloader{overflow:hidden;background:#fdcb6e;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;margin-left:-50px;left:50%;animation:speeder .4s linear infinite}
.spinner > span{height:5px;width:35px;background:#000;position:absolute;top:-19px;left:60px;border-radius:2px 10px 1px 0}
.base span{position:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #000;border-bottom:6px solid transparent}
.base span:before{content:"";height:22px;width:22px;border-radius:50%;background:#000;position:absolute;right:-110px;top:-16px}
.base span:after{content:"";position:absolute;width:0;height:0;border-top:0 solid transparent;border-right:55px solid #000;border-bottom:16px solid transparent;top:-16px;right:-98px}
.face{position:absolute;height:12px;width:20px;background:#000;border-radius:20px 20px 0 0;transform:rotate(-40deg);right:-125px;top:-15px}
.face:after{content:"";height:12px;width:12px;background:#000;right:4px;top:7px;position:absolute;transform:rotate(40deg);transform-origin:50% 50%;border-radius:0 0 0 2px}
.spinner > span > span:nth-child(1),.spinner > span > span:nth-child(2),.spinner > span > span:nth-child(3),.spinner > span > span:nth-child(4){width:30px;height:1px;background:#000;position:absolute;animation:fazer1 .2s linear infinite}
.spinner > span > span:nth-child(2){top:3px;animation:fazer2 .4s linear infinite}
.spinner > span > span:nth-child(3){top:1px;animation:fazer3 .4s linear infinite;animation-delay:-1s}
.spinner > span > span:nth-child(4){top:4px;animation:fazer4 1s linear infinite;animation-delay:-1s}
@keyframes fazer1{0%{left:0}100%{left:-80px;opacity:0}}
@keyframes fazer2{0%{left:0}100%{left:-100px;opacity:0}}
@keyframes fazer3{0%{left:0}100%{left:-50px;opacity:0}}
@keyframes fazer4{0%{left:0}100%{left:-150px;opacity:0}}
@keyframes speeder{0%{transform:translate(2px,1px) rotate(0deg)}10%{transform:translate(-1px,-3px) rotate(-1deg)}20%{transform:translate(-2px,0px) rotate(1deg)}30%{transform:translate(1px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,3px) rotate(-1deg)}60%{transform:translate(-1px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-2px,-1px) rotate(1deg)}90%{transform:translate(2px,1px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}}
.longfazers{position:absolute;width:100%;height:100%}
.longfazers span{position:absolute;height:2px;width:20%;background:#000}
.longfazers span:nth-child(1){top:20%;animation:lf .6s linear infinite;animation-delay:-5s}
.longfazers span:nth-child(2){top:40%;animation:lf2 .8s linear infinite;animation-delay:-1s}
.longfazers span:nth-child(3){top:60%;animation:lf3 .6s linear infinite}
.longfazers span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s}
@keyframes lf{0%{left:200%}100%{left:-200%;opacity:0}}
@keyframes lf2{0%{left:200%}100%{left:-200%;opacity:0}}
@keyframes lf3{0%{left:200%}100%{left:-100%;opacity:0}}
@keyframes lf4{0%{left:200%}100%{left:-100%;opacity:0}}

Jika sudah langkah terakhir sobat pasang kode HTML dibawah ini dan letakan dibawah <body>

<div id='preloader'>
<div class='spinner'>
  <span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </span>
  <div class='base'>
    <span></span>
    <div class='face'></div>
  </div>
</div>
<div class='longfazers'>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
</div>


NB: Menggunakan atau memasang Efek Preloading ini tidak mengakibatkan blog menjadi berat, karena efek ini 100% tidak menggunakan gambar (gif). efek ini 100% hanya memakai css. Jadi kalian tidak perlu khawatir akan efek ini.
Demikian tulisan kali ini, selamat mencoba dan semoga bermanfaat.

Inilah Kumpulan Kode Warna Flat Ui untuk blog | Memperbaiki

      Comment  
Bagi teman teman yang sedang mencari Kode Warna Flat Ui mungkin sobat bisa mencoba kode warna berikut ini, dan juga sobat bisa menggunakannya memperindah tampilan blognya.

Setiap warna memiliki kode tertentu yang diwakili oleh 6 angka diawali dengan tanda #. Kode tersebut biasa digunakan pada bahasa program html seperti yang digunakan dalam pembuatan blog.

kumpulan kode warna html


Kumpulan Kode Warna Flat Ui 
Teman teman dapat langsung memilih warna yang diinginkan dibawah ini, saya berharap pengunjung dari blog ini tidak mencopy isi semua artikel yang telah dibuat ini ya.

Kode Warna Flat Ui

  • Kode Warna #5C97BF
  • Kode Warna #4B77BE
  • Kode Warna #1F3A93
  • Kode Warna #2574A9
  • Kode Warna #67809F
  • Kode Warna #34495E
  • Kode Warna #3A539B
  • Kode Warna #1E8BC3
  • Kode Warna #6BB9F0
  • Kode Warna #22313F
  • Kode Warna #336E7B
  • Kode Warna #19B5FE
  • Kode Warna #89C4F4
  • Kode Warna #2C3E50
  • Kode Warna #3498DB
  • Kode Warna #22A7F0
  • Kode Warna #94E0EE
  • Kode Warna #52B3D9
  • Kode Warna #59ABE3
  • Kode Warna #26A65B
  • Kode Warna #1E824C
  • Kode Warna #00B16A
  • Kode Warna #2ABB9B
  • Kode Warna #4DAF7C
  • Kode Warna #03A678
  • Kode Warna #26C281
  • Kode Warna #019875
  • Kode Warna #3FC380
  • Kode Warna #16A085
  • Kode Warna #2ECC71
  • Kode Warna #C5EFF7
  • Kode Warna #C8F7C5
  • Kode Warna #049372
  • Kode Warna #36D7B7
  • Kode Warna #66CC99
  • Kode Warna #1BA39C
  • Kode Warna #1BBC9B
  • Kode Warna #65C6BB
  • Kode Warna #BFBFBF
  • Kode Warna #ABB7B7
  • Kode Warna #DADFE1
  • Kode Warna #95A5A6
  • Kode Warna #C5DCE2
  • Kode Warna #BDC3C7
  • Kode Warna #EEEEEE
  • Kode Warna #D2D7D3
  • Kode Warna #F0E2C5
  • Kode Warna #EB9532
  • Kode Warna #E67E22
  • Kode Warna #F27935
  • Kode Warna #F9BF3B
  • Kode Warna #F7CA18
  • Kode Warna #F9690E
  • Kode Warna #F39C12
  • Kode Warna #D35400
  • Kode Warna #F4D03F
  • Kode Warna #F5AB35
  • Kode Warna #EB974E
  • Kode Warna #F2784B
  • Kode Warna #F4B350
  • Kode Warna #E87E04
  • Kode Warna #E74C3C
  • Kode Warna #CF000F
  • Kode Warna #C0392B
  • Kode Warna #D64541
  • Kode Warna #EF4836
  • Kode Warna #96281B
  • Kode Warna #D91E18
  • Kode Warna #E26A6A
  • Kode Warna #FF0000
  • Kode Warna #F22613
  • Kode Warna #E08283
  • Kode Warna #9B59B6
  • Kode Warna #8E44AD
  • Kode Warna #BE90D4
  • Kode Warna #BF55EC
  • Kode Warna #9A12B3
  • Kode Warna #913D88
  • Kode Warna #722D6A
  • Kode Warna #740A4E

Mungkin cukup sekian dulu pembahasan tentang kode warna flat UI, semoga bermanfaat bagi teman - teman dan mohon maaf jika ada kekeliruan.

Inilah Cara membuat Subscribe Box Keren Di Blogger | Memperbaiki

      Comment  
Hi sobat blogger apa kabarnya di hari ini? mudah-mudahan pada sehat ya.
Di kesempatan kali ini saya akan membagikan sebuah widget blogger yang dimana widget seperti ini wajib ada di sebuah blog.
Dan mungkin juga sebagian blogger sudah paham tentang kegunaan dari widget ini, dan untuk kalian yang belum tahu apa kegunaan dari widget ini bisa menyimaknya dibawah ini.


Cara membuat Subscribe Box Keren Di Blogger 
Buat kalian sobat blogger yang belum memasang widget seperti ini, saya sarankan agar bisa memasangnya di blog. Karena sangat penting sekali widget subscribe berlangganan via email selain itu juga pengunjung tidak akan ketinggalan update dari blog kalian yang di share apa lagi, update postingan kalian berkualitas dan banyak penggemarnya.

Lantas bagaimana cara membuat widget seperti ini? Nah untuk kalian yang ingin membuatnya gampang kok kalian bisa ikuti langkah-langkah dibawah ini.

Jika kalian tertarik silahkan kalian pasang terlebih dahulu code dibawah ini. dan letakan codenya tepat sebelum </head> 

 

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Jika sudah selanjutnya kalian letakan code CSS dibawah ini, letakan codenya tepat sebelum </style> atau </b:skin> 

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Kalian juga bisa sesuaikan CSS warnanya dengan selera kalian, dengan mengedit bagian Backgroundnya. Jika tidak kalian bisa langsung save/simpan kembali template yang sudah kalian edit tadi.

Selanjutnya agar widgetnya bisa tampil kalian gunakan code dibawah ini, dan bisa kalian letakan dibagian bawah postingan, footer, atau terserah kalian enaknnya di letakan dimana.

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>



CATATAN:Silahkan kalian bisa edit,
code diatas sesuai apa yang sudah saya tandai.
Nah mungkin dari saya cukupkan sekian dulu ya sobat tentang Cara membuat Subscribe Box Keren Di Blogger selamat mencoba, dan semoga bermanfaat.